import React, { Component } from 'react';
import { NavBar } from 'antd-mobile';
import "./classify.scss";
import SearchInput from "../searchInput/searchInput";
import { withRouter } from "react-router-dom";
import myaxios from "../../utils/myaxios";

class classify extends Component {
    //左边点击事件
    handleListClick = (e) => {
        let select_index = e.target.getAttribute("data-index");
        if(select_index){
            this.setState({
                select_index:parseInt(select_index),
                right_list:this.state.left_list[select_index].children
            })
        }
    }
    //右边点击事件
    handleProductItemClick = (e) => {
        let cid = e.target.getAttribute("data-index");
        // console.log(this.props);
        // console.log(cid);
        if(cid){
            this.props.history.push("/goodList/" + cid);
        }
    }
    
    state = {
        left_list:[], //左边列表
        right_list:[], //右边列表
        select_index:0, //选中商品下标
    }
    //定义一个获取接口数据的函数
    getCategories = (params) => {
        myaxios.get("/categories").then((res) => {
            this.setCategories(res);
        }).catch((err) => {
            console.log(err)
        })
    }
    //定义一个存储为本地的函数 is_storage代表之前是否已经缓存过
    setCategories = (res,is_storage) => {
        //缓存请求的数据
        let categories_cache = {};
        if(is_storage){
            //如果已经缓存过 直接获取本地缓存中的数据即可
            categories_cache = JSON.parse(localStorage.getItem("categories_cache"));
        }else{
            //否则从接口获取数据
            categories_cache = { date: Date.now(), categories: res };
        }
        //缓存到本地
        localStorage.setItem("categories_cache", JSON.stringify(categories_cache));
        this.setState({
            left_list: res,
            right_list: res[0].children,
        });
    }
    
    componentDidMount(){
        // 判断本地是否有缓存
        let categories_cache = localStorage.getItem("categories_cache");
        //如果本地缓存不为空
        if(categories_cache){
            //判断缓存是否过期
            let current_time = Date.now();
            let storage_time = JSON.parse(categories_cache).date;
            if(current_time - storage_time > 60*60*1000*24*30) {
                //如果过期了 则从接口获取数据
                this.getCategories();
            }else{
                //如果没过期 则直接使用
                this.setCategories(JSON.parse(categories_cache).categories, true);
            }
        }else{
            //如果本地为空 则从接口获取数据
            this.getCategories();
        }
        
    }
    render() {
        return (
            <div className="yg-classify">
                {/* 标题开始 */}
                <div className="yg-classify-title">
                    <NavBar className="yg-classify-title-text">商品分类</NavBar>
                </div>
                {/* 标题结束 */}
                {/* 搜索开始 */}
                <div className="yg-classify-search">
                    <SearchInput></SearchInput>
                </div>
                {/* 搜索结束 */}
                {/* 列表开始 */}
                <div className="yg-classify-list">
                    {/* 列表左边开始 */}
                    <div className="list-left" onClick={this.handleListClick}>
                        {
                            this.state.left_list.map((v,index) => {
                                return <div
                                data-index={index}
                                className={this.state.select_index == index?"list-left-item active":"list-left-item"}
                                key={v.cat_id}
                                >
                                    {v.cat_name}
                                </div>
                            })
                        }
                    </div>
                    {/* 列表左边结束 */}
                    {/* 列表右边开始 */}
                    <div className="list-right">
                        {
                            this.state.right_list.map((v,i) => {
                                return (
                                // 右边标题
                                <div className="right-product" key={v.cat_id}>
                                    <div className="list-right-title" key={v.cat_id}>
                                        {"/"}{v.cat_name}{"/"}
                                    </div>
                                    
                                    <div className="list-right-img" onClick={this.handleProductItemClick}>
                                        {
                                            v.children && v.children.map((v) => {
                                                return(
                                                <div className="img-product" key={v.cat_id} data-index={v.cat_id}>
                                                    <div className="img">
                                                        <img src={v.cat_icon} alt="" data-index={v.cat_id}/>
                                                    </div>
                                                    <div className="text-product">
                                                        {v.cat_name}
                                                    </div>
                                                </div> ) 
                                            })
                                        }
                                    </div>
                                </div>)
                            })
                        }
                    </div>
                    {/* 列表右边结束 */}
                </div>
                {/* 列表结束 */}
            </div>
        )
    }
}

export default withRouter(classify)
